<template>
  <el-button-group>
    <el-button :class="{'text-gray-6': !isGrid}" :type="isGrid ? 'primary' : 'default'" :size="size" icon="el-icon-s-grid" @click="changeGridHandle(true)" />
    <el-button :class="{'text-gray-6': isGrid}" :type="!isGrid ? 'primary' : 'default'" :size="size" icon="el-icon-s-unfold" @click="changeGridHandle(false)" />
  </el-button-group>
</template>

<script>
import { setDomainValue, getDomainValue } from './local-storage-util'
export default {
  props: {
    /**
       * 存储在 local storage 里面的域
       */
    domain: String,
    default: Boolean,
    size: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isGrid: Boolean
    }
  },
  computed: {
  },
  component: [
    setDomainValue,
    getDomainValue
  ],
  mounted() {
    if (this.domain == undefined) {
      alert('The domain parameter is not set')
      return
    }
    if (this.default == undefined) {
      this.default = true
    }
    var rootNode = this.$store.getters['pageSettings']
    const config = getDomainValue(rootNode, this.domain, { isGrid: this.default })
    this.isGrid = config.isGrid
    this.$emit('update:isGrid', this.isGrid)
  },
  methods: {
    changeGridHandle(isGrid) {
      this.isGrid = isGrid
      const config = { isGrid: this.isGrid }
      setDomainValue(this.domain, config)
      this.$emit('update:isGrid', isGrid)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
